<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, user-scalable=no">
    <title>发布悬赏任务 - 综合服务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            font-size: 28px;
            width: 750px;
            overflow-x: hidden;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            padding-bottom: 150px;
        }
        
        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
            color: white;
            padding: 30px;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .back-btn {
            font-size: 40px;
            color: white;
            cursor: pointer;
        }
        
        .header-title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            flex: 1;
        }
        
        /* 悬赏类型选择 */
        .type-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .section-title {
            font-size: 34px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 15px;
            color: #1a73e8;
        }
        
        .type-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .type-item {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 25px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .type-item:hover, .type-item.active {
            background: #e8f0fe;
            border-color: #1a73e8;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(26, 115, 232, 0.2);
        }
        
        .type-icon {
            font-size: 50px;
            color: #1a73e8;
            margin-bottom: 20px;
        }
        
        .type-name {
            font-size: 30px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        /* 悬赏表单 */
        .form-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 40px;
        }
        
        .form-label {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 20px;
            display: block;
            color: #2c3e50;
        }
        
        .form-input, .form-textarea, .form-select {
            width: 100%;
            padding: 25px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            font-size: 28px;
            background: #f8f9fa;
            transition: all 0.3s ease;
        }
        
        .form-input:focus, .form-textarea:focus, .form-select:focus {
            border-color: #1a73e8;
            background: white;
            outline: none;
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
        }
        
        .form-textarea {
            height: 200px;
            resize: vertical;
        }
        
        /* 阶段悬赏 */
        .stages-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .stage-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .stage-title {
            font-size: 32px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .add-stage-btn {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 15px;
            font-size: 26px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        .add-stage-btn i {
            margin-right: 10px;
        }
        
        .stage-item {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            position: relative;
        }
        
        .stage-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .stage-name {
            font-size: 30px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .stage-delete {
            color: #e74c3c;
            font-size: 36px;
            cursor: pointer;
        }
        
        .stage-amount {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .amount-label {
            font-size: 28px;
            color: #7f8c8d;
            margin-right: 20px;
            width: 150px;
        }
        
        .amount-input {
            flex: 1;
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            font-size: 28px;
            background: white;
        }
        
        .stage-desc {
            margin-top: 20px;
        }
        
        .stage-divider {
            text-align: center;
            margin: 20px 0;
            position: relative;
        }
        
        .stage-divider:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #e0e0e0;
            z-index: 1;
        }
        
        .stage-divider span {
            background: white;
            padding: 0 20px;
            position: relative;
            z-index: 2;
            color: #7f8c8d;
            font-size: 26px;
        }
        
        /* 金额总计 */
        .total-section {
            background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
            color: white;
            border-radius: 25px;
            padding: 30px;
            margin: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .total-label {
            font-size: 32px;
            font-weight: bold;
        }
        
        .total-amount {
            font-size: 48px;
            font-weight: bold;
        }
        
        /* 支付按钮 */
        .pay-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        
        .pay-btn {
            background: linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%);
            color: white;
            border: none;
            padding: 30px 60px;
            border-radius: 15px;
            font-size: 36px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            box-shadow: 0 10px 20px rgba(255, 159, 67, 0.3);
            transition: all 0.3s ease;
        }
        
        .pay-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(255, 159, 67, 0.4);
        }
        
        .pay-tip {
            margin-top: 30px;
            font-size: 26px;
            color: #7f8c8d;
        }
        
        /* 流程说明 */
        .process-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .process-title {
            font-size: 32px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .process-steps {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .process-step {
            display: flex;
            align-items: flex-start;
        }
        
        .step-number {
            background: #1a73e8;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: bold;
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        .step-content {
            flex: 1;
        }
        
        .step-title {
            font-size: 30px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .step-desc {
            font-size: 26px;
            color: #7f8c8d;
            line-height: 1.5;
        }
        
        .dispute-note {
            background: #fff8e1;
            border-left: 5px solid #ffc107;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 26px;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="header-title">发布悬赏任务</div>
            <div></div> <!-- 占位元素保持对称 -->
        </div>
        
        <!-- 悬赏类型选择 -->
        <div class="type-section">
            <div class="section-title">
                <i class="fas fa-tasks"></i> 选择悬赏类型
            </div>
            
            <div class="type-grid">
                <div class="type-item active">
                    <div class="type-icon">
                        <i class="fas fa-calendar-day"></i>
                    </div>
                    <div class="type-name">日结类</div>
                </div>
                <div class="type-item">
                    <div class="type-icon">
                        <i class="fas fa-award"></i>
                    </div>
                    <div class="type-name">悬赏类</div>
                </div>
                <div class="type-item">
                    <div class="type-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <div class="type-name">招聘类</div>
                </div>
            </div>
            
            <!-- 招聘类型选择 -->
            <div class="form-group" style="margin-top: 40px; display: none;" id="recruit-type">
                <div class="form-label">选择招聘类型</div>
                <div style="display: flex; gap: 20px;">
                    <div class="type-item" style="width: 50%;">
                        <div class="type-icon">
                            <i class="fas fa-industry"></i>
                        </div>
                        <div class="type-name">工厂类</div>
                    </div>
                    <div class="type-item" style="width: 50%;">
                        <div class="type-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="type-name">特殊类</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 悬赏表单 -->
        <div class="form-section">
            <div class="section-title">
                <i class="fas fa-edit"></i> 悬赏任务信息
            </div>
            
            <div class="form-group">
                <label class="form-label" for="task-title">任务标题</label>
                <input type="text" class="form-input" id="task-title" placeholder="请输入任务标题（50字以内）">
            </div>
            
            <div class="form-group">
                <label class="form-label" for="task-category">任务分类</label>
                <select class="form-select" id="task-category">
                    <option value="">请选择任务分类</option>
                    <option value="design">设计类</option>
                    <option value="tech">技术开发</option>
                    <option value="content">内容创作</option>
                    <option value="promotion">推广营销</option>
                    <option value="data">数据录入</option>
                    <option value="other">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="task-desc">任务描述</label>
                <textarea class="form-textarea" id="task-desc" placeholder="请详细描述任务要求、完成标准、注意事项等"></textarea>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="task-deadline">截止日期</label>
                <input type="text" class="form-input" id="task-deadline" placeholder="请选择任务截止日期" onfocus="this.type='date'">
            </div>
            
            <div class="form-group">
                <label class="form-label" for="task-location">任务地点</label>
                <input type="text" class="form-input" id="task-location" placeholder="线上任务请填写'线上'，线下任务请填写具体地址">
            </div>
        </div>
        
        <!-- 阶段悬赏设置 -->
        <div class="stages-section">
            <div class="stage-header">
                <div class="stage-title">阶段悬赏设置</div>
                <button class="add-stage-btn" id="add-stage">
                    <i class="fas fa-plus"></i> 添加阶段
                </button>
            </div>
            
            <div class="stage-item">
                <div class="stage-top">
                    <div class="stage-name">第一阶段</div>
                    <div class="stage-delete" style="display: none;">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                </div>
                
                <div class="stage-amount">
                    <div class="amount-label">阶段金额</div>
                    <input type="number" class="amount-input" value="0" min="0">
                </div>
                
                <div class="stage-desc">
                    <label class="form-label">阶段描述</label>
                    <input type="text" class="form-input" placeholder="请描述本阶段任务要求">
                </div>
            </div>
            
            <div class="stage-divider">
                <span>+</span>
            </div>
            
            <div class="stage-item">
                <div class="stage-top">
                    <div class="stage-name">第二阶段</div>
                    <div class="stage-delete">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                </div>
                
                <div class="stage-amount">
                    <div class="amount-label">阶段金额</div>
                    <input type="number" class="amount-input" value="0" min="0">
                </div>
                
                <div class="stage-desc">
                    <label class="form-label">阶段描述</label>
                    <input type="text" class="form-input" placeholder="请描述本阶段任务要求">
                </div>
            </div>
            
            <div class="stage-divider">
                <span>+</span>
            </div>
            
            <div class="stage-item">
                <div class="stage-top">
                    <div class="stage-name">第三阶段</div>
                    <div class="stage-delete">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                </div>
                
                <div class="stage-amount">
                    <div class="amount-label">阶段金额</div>
                    <input type="number" class="amount-input" value="0" min="0">
                </div>
                
                <div class="stage-desc">
                    <label class="form-label">阶段描述</label>
                    <input type="text" class="form-input" placeholder="请描述本阶段任务要求">
                </div>
            </div>
        </div>
        
        <!-- 金额总计 -->
        <div class="total-section">
            <div class="total-label">任务总金额</div>
            <div class="total-amount">¥ <span id="total-amount">0.00</span></div>
        </div>
        
        <!-- 支付按钮 -->
        <div class="pay-section">
            <button class="pay-btn">
                <i class="fas fa-lock"></i> 支付悬赏金额并发布
            </button>
            <div class="pay-tip">
                支付后金额将托管在平台，任务完成后支付给执行方
            </div>
        </div>
        
        <!-- 流程说明 -->
        <div class="process-section">
            <div class="process-title">悬赏任务流程说明</div>
            
            <div class="process-steps">
                <div class="process-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <div class="step-title">发布悬赏</div>
                        <div class="step-desc">填写任务信息并支付悬赏金额到平台</div>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <div class="step-title">执行方申请</div>
                        <div class="step-desc">平台从业者在线申请执行任务</div>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <div class="step-title">选择执行方</div>
                        <div class="step-desc">您可以选择申请者或邀请特定从业者</div>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <div class="step-title">开始执行</div>
                        <div class="step-desc">双方同意后正式开始执行任务</div>
                    </div>
                </div>
                
                <div class="process-step">
                    <div class="step-number">5</div>
                    <div class="step-content">
                        <div class="step-title">阶段结算</div>
                        <div class="step-desc">每个阶段完成后单独结算该阶段金额</div>
                    </div>
                </div>
                
                <div class="dispute-note">
                    <i class="fas fa-exclamation-circle"></i> 如出现纠纷：任何一方可点击"我有异议"，平台将冻结该笔交易金额，双方协商一致后解锁交易并按流程核销。
                </div>
            </div>
        </div>
    </div>

    <script>
        // 显示/隐藏招聘类型选择
        const recruitTypeSection = document.getElementById('recruit-type');
        const typeItems = document.querySelectorAll('.type-item');
        
        typeItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有激活状态
                typeItems.forEach(i => i.classList.remove('active'));
                // 添加当前激活状态
                this.classList.add('active');
                
                // 如果选择的是招聘类，显示招聘类型选择
                if (this.querySelector('.type-name').textContent === '招聘类') {
                    recruitTypeSection.style.display = 'block';
                } else {
                    recruitTypeSection.style.display = 'none';
                }
            });
        });
        
        // 计算总金额
        const amountInputs = document.querySelectorAll('.amount-input');
        const totalAmount = document.getElementById('total-amount');
        
        function calculateTotal() {
            let total = 0;
            amountInputs.forEach(input => {
                total += parseFloat(input.value) || 0;
            });
            totalAmount.textContent = total.toFixed(2);
        }
        
        // 监听金额输入变化
        amountInputs.forEach(input => {
            input.addEventListener('input', calculateTotal);
        });
        
        // 添加阶段
        const addStageBtn = document.getElementById('add-stage');
        const stagesContainer = document.querySelector('.stages-section');
        
        addStageBtn.addEventListener('click', function() {
            const stageCount = document.querySelectorAll('.stage-item').length;
            const newStageNumber = stageCount + 1;
            
            const newStage = document.createElement('div');
            newStage.className = 'stage-item';
            newStage.innerHTML = `
                <div class="stage-top">
                    <div class="stage-name">第${newStageNumber}阶段</div>
                    <div class="stage-delete">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                </div>
                
                <div class="stage-amount">
                    <div class="amount-label">阶段金额</div>
                    <input type="number" class="amount-input" value="0" min="0">
                </div>
                
                <div class="stage-desc">
                    <label class="form-label">阶段描述</label>
                    <input type="text" class="form-input" placeholder="请描述本阶段任务要求">
                </div>
            `;
            
            // 添加分隔线
            const divider = document.createElement('div');
            divider.className = 'stage-divider';
            divider.innerHTML = '<span>+</span>';
            
            stagesContainer.insertBefore(divider, addStageBtn.parentNode.nextSibling);
            stagesContainer.insertBefore(newStage, divider.nextSibling);
            
            // 添加删除事件
            const deleteBtn = newStage.querySelector('.stage-delete');
            deleteBtn.addEventListener('click', function() {
                stagesContainer.removeChild(divider);
                stagesContainer.removeChild(newStage);
                updateStageNumbers();
                calculateTotal();
            });
            
            // 添加金额监听
            const amountInput = newStage.querySelector('.amount-input');
            amountInput.addEventListener('input', calculateTotal);
            
            updateStageNumbers();
        });
        
        // 更新阶段编号
        function updateStageNumbers() {
            const stages = document.querySelectorAll('.stage-item');
            stages.forEach((stage, index) => {
                const nameElement = stage.querySelector('.stage-name');
                nameElement.textContent = `第${index + 1}阶段`;
            });
        }
        
        // 删除阶段
        const deleteButtons = document.querySelectorAll('.stage-delete');
        deleteButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                if (document.querySelectorAll('.stage-item').length > 1) {
                    const stageItem = this.closest('.stage-item');
                    const divider = stageItem.previousElementSibling;
                    
                    if (divider && divider.classList.contains('stage-divider')) {
                        stageItem.parentNode.removeChild(divider);
                    }
                    
                    stageItem.parentNode.removeChild(stageItem);
                    updateStageNumbers();
                    calculateTotal();
                } else {
                    alert('至少需要保留一个阶段');
                }
            });
        });
        
        // 支付按钮点击事件
        const payButton = document.querySelector('.pay-btn');
        payButton.addEventListener('click', function() {
            const taskTitle = document.getElementById('task-title').value;
            const taskCategory = document.getElementById('task-category').value;
            
            if (!taskTitle) {
                alert('请填写任务标题');
                return;
            }
            
            if (!taskCategory) {
                alert('请选择任务分类');
                return;
            }
            
            const total = parseFloat(totalAmount.textContent);
            if (total <= 0) {
                alert('请设置悬赏金额');
                return;
            }
            
            // 模拟支付流程
            alert(`任务发布成功！\n总金额：¥${total.toFixed(2)}\n即将跳转到支付页面...`);
        });
        
        // 初始化金额计算
        calculateTotal();
    </script>
</body>
</html>